<!--
 * @Description: 徽标 组件
 * @Autor: codeBo
 * @Date: 2023-05-15 15:37:52
 * @LastEditors: gjzxlihaibo@163.com
 * @LastEditTime: 2023-05-16 16:21:36
-->
<template>
  <div class="badge" :style="{ 'justify-content': align }">
    <div class="wt_badge" :class="type"></div>
    <div>{{ title }}</div>
  </div>
</template>
<script lang="ts">
/**
 * 徽标组件为状态显示前面的小圆点， el 不像 antd 组件库有自己封装好的，这里我们需要自己适配他的 justify-content 属性，默认 start 左对齐，如果需要居中的话 传入 center， 颜色色值 可自己通过 type 扩展
 */
import { defineComponent } from 'vue'
export default defineComponent({
  props: {
    title: {
      type: [String, Number],
    },
    type: {
      type: String,
    },
    align: {
      type: String,
      default: () => 'start',
    },
  },
})
</script>
<style lang="scss" scoped>
.badge {
  display: flex;
  align-items: center;
  width: 100%;

  div:last-child {
    padding-left: 5px;
  }
}

.wt_badge {
  width: 6px;
  height: 6px;
  vertical-align: middle;
  border-radius: 50%;

  &.default {
    background: $default;
  }

  &.success {
    background: $success;
  }

  &.primary {
    background: $primary;
  }

  &.error {
    background: $error;
  }

  &.processing {
    background: $processing;
  }

  &.warning {
    background: $warning;
  }
}
</style>
